<template>
	<transition name='fade'>
		<div class='app-wrap'>
			<transition name='top'>
				<div class='top-bar' v-if='topShow'>
					<div class='logo' @click="home">
						
					</div>

					<div class='search'>
						 <i-input v-model="value4" icon="ios-search-strong" placeholder="Enter something..." @on-enter="onEnter"></i-input>
					</div>

					<div class='start' @click="collect" :class="{active: isCollect}">
						<Icon type="ios-star" class='icon'></Icon>
					</div>
				</div>
			</transition>	

			<div class='main'>
				<keep-alive>
					<router-view style='position: absolute; left: 0; top: 0; bottom: 0; right: 0'></router-view>
				</keep-alive>
			</div>
			
			<transition name='bottom'>
				<div class='bottom-tab'  v-if="bottomShow">
					<div class='tab-item' v-for="(item, index) in bottomTabs" :class="{'active': index == activeTab}" @click="skip(item, index)" :key="item.id">
						<Icon :type="item['icon']" class='icon'></Icon>
						{{ item['name'] }}
					</div>
				</div>
			</transition>
		</div>
	</transition>	
</template>

<script>
	export default{
		data() {
			return {
				value4		: "请输入关键字",
				topShow		: false,
				bottomShow	: false,
				activeTab	: 0,
				isIndex		: true,
				isCollect	: false,
				bottomTabs: [{
					icon: 'home',
					name: '首页',
					path: '/home/index'

				},{
					icon: 'person',
					name: '我的',
					path: '/user/index'
				}]
			}
		},
		created() {

			// this.HttpService.logo().then(data => {

			// })

			this.activeTab = this.$route.query.t || 0
		},
		methods: {
			onEnter() {
				this.$router.push('/home/search?k=' + this.encodeUnicode(this.value4))
			},
			skip(item, index) {
				this.activeTab = index
				this.$router.push(item.path+ '?t=' + index)
			},
			login() {

			},
			getConfig() {
		      this.HttpService.getGlobalConfig().then(data => {
		        if (data) {
		          this.config = data.config
		          // this.$store.commit('setTicketCount', data.config.num)
		        }
		      })
		    },
		    getUserInfo() {
		      if (this.util.getStorageSync('session'))
		        this.HttpService.signIn()
		    },
		    collect() {
		    	this.isCollect = !this.isCollect
		    	if(this.isCollect) {
		    		this.$Message.success('添加收藏');
		    	} else {
		    		this.$Message.info('取消收藏');
		    	}
		    },
		    encodeUnicode (str) {  
			    var res = [];  
			    for ( var i=0; i<str.length; i++ ) {  
			    res[i] = ( "00" + str.charCodeAt(i).toString(16) ).slice(-4);  
			    }  
			    return "\\u" + res.join("\\u");  
			},
			home() {
				this.$router.push('/')				
			}
		},
		watch: {
		}
	}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
	@import "~@/common/stylus/variable.styl"
	@import "~@/common/stylus/mixin.styl"
	
	::-webkit-scrollbar
		width: 0

	.top-bar
		display: none
		position: absolute
		left: 0
		top: 0
		right: 0
		display: flex
		padding: 5px
		align-items: center
		background-color: $mc
		color: #fff
		.logo
			width: 100px
			height: 40px
			background: url('../assets/logo.png') no-repeat
			background-size: cover
		.search
			flex: 1
			margin: 0 20px 0 10px
		.start
			width: 40px
			height: 40px
			line-height: 40px
			text-align: center
			font-size: 2rem
			&.active
				color: red
				.icon
					text-shadow: 1px 1px 2px #555
					
	.main
		position: absolute
		left: 0
		right: 0
		top: 0px
		bottom: 0px
		overflow-y: scroll
		background: url('./1.png')
	.bottom-tab
		display: none
		position: absolute
		bottom: 0
		left: 0
		right: 0
		box-sizing: border-box
		display: flex
		justify-content: center
		align-items: center
		height: 50px
		border: 1px solid $mc
		.icon
			display: block
			font-size: 2rem
		.tab-item
			flex: 1
			text-align: center
			cursor: pointer
			&.active
				color: $mc
	.loading
		position: fixed
		top: 50px
		bottom: 50px
		left: 0
		right: 0
		z-index: 999
		width: auto
		height: auto
	
	.top-enter-active, .top-leave-active
		transition:all 0.4s cubic-bezier(1.0, 0.5, 0.8, 1.0)
	.top-enter
		transform: translate3d(0, -50px, 0)
	.top-leave
		transform: translate3d(0, 0, 0)
		
	.bottom-enter-active, .bottom-leave-active
		transition:all 0.4s cubic-bezier(1.0, 0.5, 0.8, 1.0)
	.bottom-enter
		transform: translate3d(0, 55px, 0)
	.bottom-leave
		transform: translate3d(0, 0px, 0)
</style>